<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('可勾选表格')}`">{{ $t('可勾选表格') }}</t>
            <li>
                <span class="d-code">index-config</span>
                配置对象可以控制首列的展示类型；当该对象内的
                <span class="s-code">type</span>
                设置为
                <span class="s-code">selection</span>
                时，首列可展示为复选框列；
                <span class="s-code">type</span>的
                可选值有：
                <span class="s-code">index | selection | expand | hidden</span>
                （索引列 | 复选框列 | 可展开列表 | 隐藏该列）；
                如果你需要控制指定行不允许勾选，你可以通过该对象内的
                <span class="s-code">selectable</span>函数来实现，该函数有两个参数
                <span class="s-code">(row, index)</span>
            </li>
            <li>
                <span class="d-code">selection</span>可以配置默认选中，并且它是响应式的，当它变化时，选中行也会随之变化
            </li>
            <li>
                注意：数据勾选、排序、展开等逻辑都是依据数据行内的唯一键
                <span class="d-code">row-key</span>来的，
                在组件内部其值默认为数据行内的
                <span class="s-code">"id"</span>；
                如果数据行内不存在<span class="s-code">"id"</span>字段，
                那么你必须指定
                <span class="d-code">row-key</span>的值
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleCheck">点击勾选</el-button>
            <el-button @click="handleClear">清空勾选</el-button>
        </div>
        <sib-table
            row-key="rowId"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            :selection="selection">
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selection = ref([4, 6]);
        return {
            indexConfig: {
                type: 'selection',
                // 奇数行不允许勾选
                selectable: (row, index) => index % 2,
            },
            selection,
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData: Array(30).fill().map((_, i) => ({
                rowId: i + 1,
                name: `张三${i + 1}号`,
                sex: i % 2 ? '男' : '女',
                height: 165 + i,
                status: i % 2,
                age: i + 10,
                avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            })),
            handleCheck() {
                selection.value = [2, 4];
            },
            handleClear() {
                selection.value = [];
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleCheck">点击勾选</el-button>
            <el-button @click="handleClear">清空勾选</el-button>
        </div>
        <sib-table
            row-key="rowId"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            :selection="selection">
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const selection = ref([4, 6]);
        return {
            indexConfig: {
                type: 'selection',
                // 奇数行不允许勾选
                selectable: (row, index) => index % 2,
            },
            selection,
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData: Array(30).fill().map((_, i) => ({
                rowId: i + 1,
                name: \`张三\${i + 1}号\`,
                sex: i % 2 ? '男' : '女',
                height: 165 + i,
                status: i % 2,
                age: i + 10,
                avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            })),
            handleCheck() {
                selection.value = [2, 4];
            },
            handleClear() {
                selection.value = [];
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
